<template>
	<div class="heightMax order flexPublic diagonose">
		<div class="roleTopBox">
			<div class="listName">
				<i></i><span class="font14">电梯基本信息</span>
			</div>
			<div class="flexTitle">
				<div class="flexTitleItem">
					<span>设备代码：</span>
					<i>{{eleCode}}</i>
				</div>
				<!-- 	<div class="flexTitleItem">
					<span>档案编号：</span>
					<i>{{serialNumber}}</i>
				</div> -->
				<div class="flexTitleItem">
					<span>使用地点：</span>
					<i>{{usingSite}}</i>
				</div>
				<div class="flexTitleItem">
					<span>制造单位：</span>
					<i>{{manufactureComp}}</i>
				</div>
			</div>
		</div>
		<div class="roleBottomBox">
			<el-tabs v-model="activeName" type="card" style="height: 100%;">
				<el-tab-pane label="电梯诊断" name="first">
					<vueScroll>
						<div class="initial" v-if="isShowPoint">
							<div class="ball">
								<span>{{allPoint}}</span><i>分</i>
							</div>
							<div class="message">
								<div><span>上次体检分数 : </span><i class="eleBlueColor" style="font-size: 50px;">{{allPoint}}</i></div>
								<div class="time"><span>上次体检时间 : {{time}}</span></div>
								<el-button type="primary" size="medium" @click='changeShowStatus(1)'>开始诊断</el-button>
							</div>
						</div>
						<div class="examination" v-else>
							<div class="examinationTop">
								<div class="animatedLoop">
									<div class="loopImg" :class="[!showMessTitle ? 'animatedLoopChange' : '' ]"></div>
									<div class="score">
										{{currentScore}}分
									</div>
								</div>
								<div class="des">
									<p class="desTit">{{mess}}</p>
									<p class="desCont">当前共检验{{allPro}}项,其中存在问题 : {{mistake}}项</p>
								</div>
								<el-button type="primary" size="medium" @click='changeShowStatus(2)'>返回</el-button>
							</div>
							<div class="examinationBottom">
								<div class="title" v-if="showMessTitle"><i class="el-icon-folder-checked eleBlueColor"></i>检测项目明细 :</div>
								<div class="collapse">
									<el-collapse v-model="activeNames">
										<el-collapse-item :name="index" v-for="(item,index) in collapseArr" :key='index'>
											<template slot="title">
												<div class="listName">
													<i></i><span class="font16">{{item.title}}</span>&nbsp;-&nbsp;<span>共{{item.num}}项</span>
												</div>
											</template>
											<div class="loopBox">
												<div class="loopBoxItem" v-for="(item1,index1) in item.arr" :key='index1'>
													<div class="animatedBox">
														<div class="loopImg" style="width: 80px; height: 80px;" :class="[!showMessTitle ? 'animatedLoopChange' : '' ]"
														 v-if="!showMessTitle"></div>
														<img src="../../../assets/diagnoseImg/1.png" alt="" style="width: 60px;height: 60px;" v-if="item1.status">
														<img src="../../../assets/diagnoseImg/lift1.png" alt="" style="width: 60px;height: 60px;" v-else>
													</div>
													<p>{{item1.mess}}</p>
												</div>
											</div>

										</el-collapse-item>
									</el-collapse>
								</div>
							</div>
						</div>
					</vueScroll>
				</el-tab-pane>
				<!-- 	<el-tab-pane label="趋势查询" name="second">
					<div class="secBox">
						<el-row>
							<el-col :span="12">
								<el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="startTime" type="date" placeholder="请选择开始日期"
								 clearable size="mini" :picker-options="pickerOptions1" @change="timeChange">
								</el-date-picker>
								<span style="margin: 0 5px;">~</span>
								<el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" :disabled="isDis" v-model="endTime" type="date"
								 placeholder="请选择结束日期" clearable size="mini" :picker-options="pickerOptions2">
								</el-date-picker>
								<el-button type="primary" icon="el-icon-search" size="mini" style="margin-left: 10px;" @click='search'>搜索</el-button>
								<el-button icon="el-icon-delete" size="mini" @click='reset'>重置</el-button>
							</el-col>
						</el-row>
						<div class="bottomBox">
							<div class="bottomItem">
								<div class="listName">
									<i></i><span class="font14">电梯健康分数</span>
								</div>
								<div class="echartsBox" ref='echartsBox'>
									
								</div>
							</div>
							<div class="bottomItem">
								<div class="listName">
									<i></i><span class="font14">问题项信息</span>
								</div>
								<div class="tableBox">
									<vueScroll>
										<el-table :data="tableData" highlight-current-row ref="moviesTable" style="width: 100%" border
										 header-row-class-name='tableHeader'>
											<el-table-column label="编号">
												<template slot-scope="scope">
													<el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
														<span class="speSpan">{{scope.row.name}}</span>
													</el-tooltip>
												</template>
											</el-table-column>
											<el-table-column label="风险名称">
												<template slot-scope="scope">
													<el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
														<span class="speSpan">{{scope.row.name}}</span>
													</el-tooltip>
												</template>
											</el-table-column>
											<el-table-column label="发生次数">
												<template slot-scope="scope">
													<el-tooltip class="item" effect="dark" :content="scope.row.company_type_name" placement="top">
														<span class="speSpan">{{scope.row.company_type_name}}</span>
													</el-tooltip>
												</template>
											</el-table-column>
										</el-table>
									
										<div class="pag">
											<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
											 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
											</el-pagination>
										</div>
									</vueScroll>
								</div>
							</div>
						</div>
					</div>
				</el-tab-pane> -->
			</el-tabs>
		</div>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		AllLoading,
		moment
	} from "@/common.js";
	export default {
		mounted() {
			// this.createEcharts()
			if (localStorage.last_checkup_score) {
				this.allPoint = JSON.parse(localStorage.last_checkup_score).point
				if(!this.allPoint){
					this.allPoint = 0
				}
			} else {
				this.allPoint = 0
			}
			if (localStorage.last_checkup_time) {
				this.time = JSON.parse(localStorage.last_checkup_time).time
			} else {
				this.time = 0
			}
		},
		data() {
			return {
				serialNumber: '1148558',
				activeName: 'first',
				point: '100.0',
				time: '',
				startTime: '',
				endTime: '',
				tableData: [],
				page: 1,
				page_size: 10,
				total: 0,
				currentScore: '100.0',
				pickerOptions1: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
				},
				mess: '正在体检',
				allPro: 0,
				mistake: 0,
				activeNames: [],
				collapseArr: [{
						title: '实时运行状态',
						num: 1,
						arr: [{
							mess: '运行状态'
						}]
					}, {
						title: '电梯基本数据',
						num: 3,
						arr: [{
								mess: '使用年限'
							},
							{
								mess: '年平均运行次数'
							},
							{
								mess: '年运行次数'
							}
						]
					},
					{
						title: '电梯故障',
						num: 2,
						arr: [{
								mess: '近三十日故障次数'
							},
							{
								mess: '近一年故障次数'
							},
						]
					},
					{
						title: '电梯维保',
						num: 3,
						arr: [{
								mess: '维保时限'
							},
							{
								mess: '维保关键位置检查'
							},
							{
								mess: '维保时长'
							}
						]
					},
				],
				isShowPoint: true,
				flag: 0,
				timer: null,
				showMessTitle: false,
				crate_time: '',
				newScore: '',
				allPoint: '',
				number:'',
				currentResult:''
			}
		},
		computed: {
			diagnoseId() {
				if (localStorage.diagnoseId) {
					return JSON.parse(localStorage.diagnoseId).id
				} else {
					return ''
				}
			},
			eleCode() {
				if (localStorage.diaRegister_code) {
					return JSON.parse(localStorage.diaRegister_code).name
				} else {
					return ''
				}
			},
			usingSite() {
				if (localStorage.diaInstallation_place) {
					return JSON.parse(localStorage.diaInstallation_place).name
				} else {
					return ''
				}
			},
			manufactureComp() {
				if (localStorage.diaProperty_company_name) {
					return JSON.parse(localStorage.diaProperty_company_name).name
				} else {
					return ''
				}
			},

			isDis() {
				if (this.startTime) {
					return false
				} else {
					return true
				}
			},
			pickerOptions2() {
				return {
					disabledDate: (time) => {
						return time.getTime() > Date.now() || time.getTime() < moment(this.startTime);
					}
				}
			}
		},
		methods: {
			getMessage() {
				let url = '/sta/checkup/elevator/' + this.diagnoseId
				axiosGet(url, '', (res) => {
					if (res.code == 0) {
						this.currentResult = res.detail.result
						this.crate_time = res.detail.crate_time
						this.newScore = res.detail.score
						this.number = res.detail.number
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			changeShowStatus(val) {
				if (val == 1) {
					this.getMessage()
					this.flag = 0
					setTimeout(() => {
						this.timer = setInterval(() => {
							console.log('12312321321321')
							this.activeNames.push(this.flag)
							let is_online = this.currentResult.is_online
							let mef = this.currentResult.mef 
							let yef = this.currentResult.yef
							let task = this.currentResult.task
							let repair = this.currentResult.repair
							if (this.flag == 0) {
								this.$set(this.collapseArr, this.flag, {
									title: '实时运行状态',
									num: 1,
									arr: [{
										mess: '运行状态',
										status:is_online
									}]
								})
								this.allPro += 1
								this.mess = '正在体检:实时运行状态'
							} else if (this.flag == 1) {
								this.$set(this.collapseArr, this.flag, {
									title: '电梯基本数据',
									num: 3,
									arr: [{
											mess: '使用年限',
											status:0
										},
										{
											mess: '年平均运行次数',
											status:0
										},
										{
											mess: '年运行次数',
											status:0
										}
									]
								})
								this.mess = '正在体检:电梯基本数据'
								this.allPro += 3
							} else if (this.flag == 2) {
								this.$set(this.collapseArr, this.flag, {
									title: '电梯故障',
									num: 2,
									arr: [{
											mess: '近三十日故障次数',
											status:mef
										},
										{
											mess: '近一年故障次数',
											status:yef
										},
									]
								})
								this.mess = '正在体检:电梯故障'
								this.allPro += 2
							} else if (this.flag == 3) {
								this.$set(this.collapseArr, this.flag, {
									title: '电梯维保',
									num: 3,
									arr: [{
											mess: '维保时限',
											status:task
										},
										{
											mess: '维保关键位置检查',
											status:repair
										},
										{
											mess: '维保时长',
											status:0
										}
									]
								})
								this.mess = '正在体检:电梯维保'
								this.allPro += 3
							}
							this.flag++
							if (this.flag >= 4) {
								clearInterval(this.timer)
								this.timer = null
								setTimeout(() => {
									this.showMessTitle = true
									this.activeNames = []
									this.allPro = 9
									this.allPoint = this.newScore 
									if(this.allPoint > 70){
										this.mess = '电梯状态良好,请继续保持'
									}else{
										this.mess = '电梯状态不良,请尽快调整'
									}
									this.time = this.crate_time
									this.mistake = this.number
									this.currentScore = this.allPoint
								}, 2000)
							}
						}, 1500)
					}, 1000)
				}
				this.allPro = 0
				this.currentScore = 100
				this.showMessTitle = false
				this.mess =  '正在体检'
				this.activeNames = []
				this.collapseArr = [{
						title: '实时运行状态',
						num: 1,
						arr: []
					}, {
						title: '电梯基本数据',
						num: 3,
						arr: []
					},
					{
						title: '电梯故障',
						num: 2,
						arr: []
					},
					{
						title: '电梯维保',
						num: 3,
						arr: []
					},
				]
				this.isShowPoint = !this.isShowPoint
			},
			search() {

			},
			reset() {
				this.startTime = ''
				this.endTime = ''
			},
			handleCurrentChange(page) {
				this.page = page
			},
			handleSizeChange(size) {
				this.page_size = size
			},
			createEcharts() {
				let dom = this.$refs.echartsBox
				let myChart = this.echarts.init(dom)
				myChart.setOption({
					xAxis: {
						type: 'category',
						// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [100, 100, 100, 100, 100, 100, 100],
						type: 'line',
						// symbol: 'triangle',
						symbolSize: 15,
						lineStyle: {
							normal: {
								color: '#409EFF',
								width: 3,
								// type: 'dashed'
							}
						},
						itemStyle: {
							normal: {
								borderWidth: 1,
								borderColor: '#409EFF',
								color: 'blue'
							}
						}
					}]
				})
			},
			timeChange(time) {
				if (!time) {
					this.endTime = ''
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.el-row {
		width: 100%;
		margin-bottom: 0 !important;
	}

	.el-col {
		display: flex;
		align-items: center;

		span {
			float: left;
		}
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
			margin-left: 0;
		}
	}

	.flexTitle {
		width: 100%;
		display: flex;
		flex-direction: row;
		margin-top: 8px;
		font-size: 13px;

		.flexTitleItem {
			flex: 1;
			display: flex;
			flex-direction: row;
		}

		span {
			color: #b3b3b3;
		}
	}

	.roleTopBox {
		padding: 10px;
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	.roleBottomBox {
		padding: 0 !important;
	}

	.initial,
	.examination {
		position: absolute;
		left: 50%;
		top: 35px;
		transform: translateX(-50%);
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		justify-content: center;

		.ball {
			text-align: center;
			border-radius: 50%;
			background: #409eff;
			width: 300px;
			height: 300px;
			display: inline-block;
			line-height: 300px;
			color: #fff;
			box-shadow: 0 0 25px 0 #409eff;
			margin-right: 60px;

			span {
				font-size: 100px;
			}
		}

		.message {
			font-size: 30px;
			font-weight: 500;

			div {
				text-align: left;
			}

			.el-button {
				font-size: 20px;
				padding: 16px 32px !important;
				border-radius: 10px;
				margin-top: 20px;
			}

			.time {
				margin-top: 20px;
				font-size: 20px;
			}
		}
	}

	.el-tab-pane {
		height: 100%;
	}

	.secBox {
		width: 100%;
		height: 100%;
		padding: 10px;
		box-sizing: border-box;
	}

	.bottomBox {
		margin-top: 10px;
		display: flex;
		flex-direction: row;
		width: 100%;

		.bottomItem {
			flex: 1;
			display: flex;
			flex-direction: column;

			.echartsBox {
				width: 500px;
				height: 300px;
			}
		}
	}

	.examinationTop {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;


		.animatedLoop {
			width: 120px;
			height: 120px;
			position: relative;
			margin-left: 50px;

			.score {
				width: 100px;
				height: 100px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				background: #409eff;
				color: #fff;
				font-size: 26px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.des {
			display: flex;
			align-items: center;
			margin-left: 20px;
			justify-content: center;
			flex-direction: column;

			.desTit {
				font-size: 36px;
				font-weight: 545;
			}

			.desCont {
				font-size: 26px;
				font-weight: 400;
				margin-top: 10px;
			}
		}

		.el-button {
			padding: 10px 30px !important;
			font-size: 20px;
			vertical-align: middle;
			display: inline-block;
			height: 50px !important;
			margin-left: 200px !important;
		}
	}

	.examination {
		flex-direction: column !important;

		.examinationBottom {
			width: 100%;
			display: flex;
			flex-direction: column;
			padding-left: 60px;
			margin-top: 15px;
			box-sizing: border-box;

			.title {
				font-size: 22px;
				text-align: left;

				i {
					margin-right: 10px;
				}
			}

			.loopBox {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;

				.animatedBox {
					width: 80px;
					height: 80px;
					position: relative;
					margin-bottom: 10px;

					img {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}

				.loopBoxItem {
					margin: 0 5px;
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}
		}
	}

	@keyframes loopMove {
		0% {
			transform: rotateZ(0deg)
		}

		20% {
			transform: rotateZ(60deg)
		}

		40% {
			transform: rotateZ(180deg)
		}

		60% {
			transform: rotateZ(240deg)
		}

		80% {
			transform: rotateZ(300deg)
		}

		100% {
			transform: rotateZ(360deg)
		}
	}

	.loopImg {
		width: 120px;
		height: 120px;
		background: url(../../../assets/diagnoseImg/loop.png) no-repeat 0 0;
		background-size: cover;
		position: absolute;
		left: 0;
		top: 0;
	}

	.animatedLoopChange {
		animation: loopMove 3s linear infinite;
	}
</style>
